<template>
    <div class="px-5 py-3">
        <!-- 标题 -->
        <div class="py-3 flex text-xs text-gray-400 border-b">
            <div class="w-[60%] px-3"><span class="pl-3 pr-5">#</span>标题</div>
            <div class="w-[30%]">专辑</div>
            <div class="w-[10%] pl-5 pr-1">时长</div>
        </div>

        <div v-if="list.length"
            class="relative flex flex-col gap-2 text-gray-400 duration-200 group/item py-3 hover:bg-gray-200"
            v-for="item, index in list" :key="item.id" @dblclick="palySong(item)">
            <!--歌词信息 -->
            <div class="pl-3 flex  gap-3">
                <div class="w-[60%] flex items-center gap-3 ">
                    <!-- 序号 -->
                    <div class="relative h-full w-5 grid place-items-center">
                        <span class="visible group-hover/item:invisible">
                            {{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }}
                        </span>
                        <svg t="1727677590968" class="icon invisible group-hover/item:visible absolute" @click="palySong(item)"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4038"
                            width="22" height="22">
                            <path
                                d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                                fill="#fff" p-id="4039"></path>
                        </svg>
                    </div>
                    <!-- 图片 -->
                    <img :src="item.al.picUrl" class="w-12 h-12 rounded-sm" />
                    <div class="flex flex-col justify-between min-h-12">
                        <!--  -->
                        <div class="text-sm">{{ item.name }}</div>
                        <!-- 歌手 -->
                        <div class="w-full line-clamp-1 text-ellipsis overflow-hidden text-sm">
                            <span v-for="i, index in item.ar">
                                {{ i.name }}
                                <i v-if="index < item.ar.length - 1">|</i>
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 专辑 -->
                <div class="w-[30%] truncate pr-2 text-sm py-3">{{ item.al.name }}</div>
                <!-- 时长 -->
                <div class="w-[10%] py-3">{{ formatSongTime(item.dt) }}</div>
            </div>
            <!-- 歌词 -->
            <div class="flex justify-between pr-7">
                <div class="flex gap-2 pl-24">
                    <span class="text-xs bg-slate-700 text-white px-1 py-0.5 rounded-md h-fit">词</span>
                    <div :class="activeLyric !== index ? 'line-clamp-3 text-ellipsis overflow-hidden' : ''">
                        <p v-for="i in item.lyrics" class="text-xs" v-html="i"></p>
                    </div>
                </div>
                <div class="rounded-md border w-fit h-fit px-2 text-sm py-1 text-[#333] flex gap-2 items-center"
                    @click="showAllLyric(index)" v-if="activeLyric !== index">
                    <svg t="1744541837595" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="21498" width="16" height="16">
                        <path
                            d="M902.56396484 329.07763672c0 4.94384767 0 14.83154297-4.94384765 19.77539062l-365.84472656 365.84472658c-4.94384766 4.94384766-9.88769531 4.94384766-19.77539063 4.94384764-4.94384767 0-14.83154297-4.94384767-19.77539062-4.94384765l-365.84472657-365.84472657c-9.88769531-9.88769531-9.88769531-24.71923828 0-34.60693359 9.88769531-9.88769531 24.71923828-9.88769531 34.6069336 0L512 660.31542969 858.06933594 314.24609375C867.95703125 304.35839844 882.78857422 304.35839844 892.67626954 314.24609375c9.8876953 0 9.88769531 9.88769531 9.8876953 14.83154297z"
                            fill="#333333" p-id="21499"></path>
                    </svg>
                    展开歌词
                </div>
                <div class="rounded-md border w-fit h-fit px-2 text-sm py-1 text-[#333] flex gap-1 items-center"
                    @click="showAllLyric(index)" v-else>
                    <svg t="1744541893970" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="23235" width="25" height="25">
                        <path
                            d="M256 633.856a30.72 30.72 0 0 1 8.96-21.76l230.4-230.4a30.72 30.72 0 0 1 43.52 0l230.4 230.4a30.72 30.72 0 1 1-43.52 43.52l-208.64-208.64-208.64 208.64a30.72 30.72 0 0 1-51.2-21.76z"
                            p-id="23236" fill="#333333"></path>
                    </svg>
                    收起歌词
                </div>
            </div>
        </div>
        <div v-else class="h-32 flex items-center justify-center">暂无数据</div>
    </div>
</template>

<script lang="ts" setup>
import { formatSongTime } from '@renderer/hooks';
import { ref } from 'vue';
import { useStore } from '@renderer/store';

const { songDetailStore ,playListStore} = useStore();
const { list } = defineProps<{
    list: any[]
}>()
const activeLyric = ref(null as number | null)
const showAllLyric = (index: number) => {
    if (activeLyric.value == index) {
        activeLyric.value = null
        return
    }
    activeLyric.value = index
}
const palySong = (item: any) => {
    songDetailStore.getSongDetail(item.id)
    songDetailStore.getSongUrl(item.id)
    playListStore.addSongToPlayList(item)
}
</script>